<template>
  <div class="mb-3">
    <el-echarts
      theme="macarons"
      :height="300"
      :width="width"
      @onInit="onInit"
      v-show="!imgType"
      :option="option"
    ></el-echarts>
    <img height="300" class="w-100" v-show="imgType" :src="imgData" alt="" />
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    customerRelatedId: String,
    customerName: {
      type: String,
      default: '组织结构图',
    },
    imgType: Boolean,
    width: {
      type: [Number, String],
      default: '100%',
    },
  },
  data() {
    return {
      chart: null,
      option: null,
      loading: false,
      imgData: '',
    }
  },
  computed: {},
  watch: {
    customerRelatedId() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    onInit(chart) {
      this.chart = chart
    },
    async getData() {
      // datum_customer_dept
      if (!this.customerRelatedId) {
        return false
      }

      const [res, err] = await this.$utils.promise(
        this.$api.getData('credit', 'datum_customer_dept', {
          'customer_related_id.eq': this.customerRelatedId,
        })
      )

      const seriesData = [
        {
          name: this.customerName,
          value: this.customerName.length,
          children: [],
        },
      ]

      if (err || !res) {
        this.setOption(seriesData)
      }

      const data = res.data || []

      const level = [] // 分别存各级别的数据
      for (const d of data) {
        let l = Number.parseInt(d.dept_lever)
        if (isNaN(l)) {
          l = 1
        }
        const len = level.length
        if (len < l) {
          for (let i = 0; i < l - len; i++) {
            level.push([])
          }
        }
        d.children = []
        level[l - 1].push({
          name: d.dept_name,
          value: d.dept_name ? d.dept_name.length : 1,
          datum_customer_dept_id: d.datum_customer_dept_id,
          parent_dept_id: d.parent_dept_id,
          children: [],
        })
      }

      for (let j = level.length - 1; j > 0; j--) {
        const parentData = level[j - 1]
        for (const child of level[j]) {
          const index = parentData.findIndex(
            it => it.datum_customer_dept_id === child.parent_dept_id
          )
          if (index > -1) {
            parentData[index].children.push(child)
          }
        }
      }

      if (level.length) {
        seriesData[0].children = level[0]
        this.setOption(seriesData, level + 1)
      }
    },

    setOption(seriesData, initialTreeDepth) {
      this.option = {
        title: {
          text: '',
        },
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{b}: {c}',
        },
        calculable: false,
        series: [
          {
            name: '组织结构图',
            type: 'tree',
            orient: 'vertical',
            symbol: 'rectangle',
            initialTreeDepth: initialTreeDepth,
            symbolSize: function (value) {
              return [value * 20, 30]
            },
            itemStyle: {
              color: '#fff',
              borderColor: 'black',
            },
            data: seriesData,
          },
        ],
      }
      if (this.customerRelatedId && this.chart && this.chart.getDataURL) {
        this.chart.on('finished', () => {
          this.imgData = this.chart.getDataURL()
        })
      }
    },
  },
}
</script>
<style scoped></style>
